'use client';

import React, { useState } from 'react';

import Button from '@/components/ui/Button';
import { 
  Plus,
  Search,
  Play,
  Eye,
  Clock,
  Cpu,
  Activity,
  CheckCircle,
  Users,
  Database,
  Cloud,
  Server
} from 'lucide-react';

interface SchedulingStrategy {
  id: string;
  name: string;
  description: string;
  type: 'time_based' | 'resource_based' | 'load_balanced' | 'priority_based';
  status: 'active' | 'inactive' | 'running' | 'paused';
  createdAt: string;
  lastExecuted?: string;
  nextExecution?: string;
  configSource: string;
  config: {
    priority: number;
    maxConcurrentTasks: number;
    resourceAllocation: {
      cloudNodes: number;
      edgeNodes: number;
    };
  };
  metrics: {
    totalExecutions: number;
    successRate: number;
    avgExecutionTime: string;
  };
}

export default function SchedulingPage() {
  const [strategies] = useState<SchedulingStrategy[]>([
    {
      id: '1',
      name: '高优先级实时调度策略',
      description: '用于紧急电力设备监控的高优先级实时调度',
      type: 'priority_based',
      status: 'running',
      createdAt: '2024-11-20 10:30:00',
      lastExecuted: '2024-12-03 14:30:00',
      nextExecution: '2024-12-03 15:00:00',
      configSource: '人员作业安监',
      config: {
        priority: 1,
        maxConcurrentTasks: 5,
        resourceAllocation: {
          cloudNodes: 2,
          edgeNodes: 8
        }
      },
      metrics: {
        totalExecutions: 156,
        successRate: 94.2,
        avgExecutionTime: '15分钟'
      }
    },
    {
      id: '2',
      name: '负载均衡协同调度',
      description: '基于节点负载的智能资源分配调度策略',
      type: 'load_balanced',
      status: 'active',
      createdAt: '2024-11-25 09:15:00',
      lastExecuted: '2024-12-03 12:00:00',
      nextExecution: '2024-12-03 16:00:00',
      configSource: '设备缺陷识别',
      config: {
        priority: 2,
        maxConcurrentTasks: 3,
        resourceAllocation: {
          cloudNodes: 1,
          edgeNodes: 6
        }
      },
      metrics: {
        totalExecutions: 89,
        successRate: 97.8,
        avgExecutionTime: '25分钟'
      }
    }
  ]);

  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'running':
        return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
          <span className="w-1.5 h-1.5 bg-blue-600 rounded-full mr-1.5"></span>
          运行中
        </span>;
      case 'active':
        return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
          <span className="w-1.5 h-1.5 bg-green-600 rounded-full mr-1.5"></span>
          已激活
        </span>;
      case 'paused':
        return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200">
          <span className="w-1.5 h-1.5 bg-yellow-600 rounded-full mr-1.5"></span>
          已暂停
        </span>;
      case 'inactive':
        return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
          <span className="w-1.5 h-1.5 bg-gray-600 rounded-full mr-1.5"></span>
          未激活
        </span>;
      default:
        return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
          {status}
        </span>;
    }
  };

  return (
    <div className="space-y-4">
      {/* 紧凑的标题栏 */}
      <div className="flex items-center justify-between rounded-lg px-4 py-3">
        <div>
          <h1 className="text-xl font-bold text-gray-900">协同进化调度</h1>
          <p className="text-sm text-gray-600 mt-0.5">策略管理与任务监控</p>
        </div>
        <Button variant="primary" size="sm">
          <Plus className="h-4 w-4 mr-1.5" />
          新建策略
        </Button>
      </div>

      {/* 紧凑的指标卡片 */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-xs font-medium text-green-700 uppercase tracking-wide">运行中</div>
              <div className="text-2xl text-green-700 font-bold mt-1">
                {strategies.filter(s => s.status === 'running').length}
              </div>
            </div>
            <Activity className="h-6 w-6 text-green-600" />
          </div>
        </div>
        
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-xs font-medium text-green-700 uppercase tracking-wide">已激活</div>
              <div className="text-2xl text-green-700 font-bold mt-1">
                {strategies.filter(s => s.status === 'active').length}
              </div>
            </div>
            <CheckCircle className="h-6 w-6 text-green-600" />
          </div>
        </div>
        
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-xs font-medium text-green-700 uppercase tracking-wide">总数量</div>
              <div className="text-2xl text-green-700 font-bold mt-1">{strategies.length}</div>
            </div>
            <Users className="h-6 w-6 text-green-600" />
          </div>
        </div>
        
          <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-xs font-medium text-green-700 uppercase tracking-wide">成功率</div>
                  <div className="text-2xl text-green-700 font-bold mt-1">96%</div>
            </div>
            <Cpu className="h-6 w-6 text-green-600" />
          </div>
        </div>
      </div>

      {/* 紧凑的搜索栏 */}
      <div className="bg-white border border-gray-200 rounded-lg px-4 py-3 shadow-sm">
        <div className="flex flex-col sm:flex-row gap-3">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="搜索策略名称或描述..."
                className="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <select
            className="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="all">全部状态</option>
            <option value="running">运行中</option>
            <option value="active">已激活</option>
            <option value="paused">已暂停</option>
          </select>
        </div>
      </div>

      {/* 专业的策略表格 */}
      <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">策略信息</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置来源</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">优先级</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">资源配置</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">成功率</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">执行次数</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {strategies.map((strategy) => (
                <tr key={strategy.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-4 py-3">
                    <div className="min-w-0">
                      <div className="text-sm font-medium text-gray-900 truncate">{strategy.name}</div>
                      <div className="text-xs text-gray-500 truncate mt-1">{strategy.description}</div>
                      <div className="text-xs text-gray-400 mt-1">创建时间: {strategy.createdAt}</div>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center text-sm text-gray-900">
                      <Database className="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
                      <span className="truncate">{strategy.configSource}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    {getStatusBadge(strategy.status)}
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-indigo-100 text-indigo-800">
                      P{strategy.config.priority}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <div className="flex items-center justify-center gap-2">
                      <div className="flex items-center">
                        <Cloud className="h-3 w-3 text-blue-500 mr-1" />
                        <span className="text-sm font-medium text-gray-900">{strategy.config.resourceAllocation.cloudNodes}</span>
                      </div>
                      <div className="flex items-center">
                        <Server className="h-3 w-3 text-green-500 mr-1" />
                        <span className="text-sm font-medium text-gray-900">{strategy.config.resourceAllocation.edgeNodes}</span>
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <div className="flex items-center justify-center">
                      <div className="text-sm font-semibold text-green-600">{strategy.metrics.successRate}%</div>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <div className="text-sm font-medium text-gray-900">{strategy.metrics.totalExecutions}</div>
                    <div className="text-xs text-gray-500">{strategy.metrics.avgExecutionTime}</div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <div className="flex items-center justify-center gap-1">
                      <Button size="sm" variant="primary">
                        <Play className="h-3 w-3" />
                      </Button>
                      <Button size="sm" variant="secondary">
                        <Eye className="h-3 w-3" />
                      </Button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* 页面底部统计汇总 */}
        <div className="border-t border-gray-200 bg-gray-50 px-4 py-3">
          <div className="flex items-center justify-between text-sm text-gray-600">
            <div className="flex items-center gap-6">
              <span>共 {strategies.length} 个调度策略</span>
              <span>运行中: {strategies.filter(s => s.status === 'running').length}</span>
              <span>已激活: {strategies.filter(s => s.status === 'active').length}</span>
            </div>
            <div className="flex items-center gap-6">
              <span>平均成功率: 96.0%</span>
              <span>总执行次数: {strategies.reduce((sum, s) => sum + s.metrics.totalExecutions, 0)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 